<template>
  <div class="app-container">
    <div class="app-head">
      <el-form>
        <el-row type="flex" justify="start">
          <el-col :span="6">
            <el-form-item label="策略名称" label-width="100px">
              <el-input ref="vipHeight" v-model.trim="name" style="width:90%" size="mini" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="策略触发条件" label-width="100px">
              <el-select v-model="triggeringConditions" size="mini" style="width:90%" placeholder="请选择">
                <el-option value="" label="全部" />
                <el-option
                  v-for="item of selectCondition"
                  :key="item.configKeyDown"
                  :value="item.configKeyDown"
                  :label="item.configValue"
                  :disabled="item.status"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="优惠形式" label-width="100px">
              <el-select v-model="preferentialType" style="width:90%" size="mini" placeholder="请选择">
                <el-option value="" label="全部" />
                <el-option
                  v-for="item of discountsShape"
                  :key="item.configKeyDown"
                  :value="item.configKeyDown"
                  :label="item.configValue"
                  :disabled="item.status"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="4" />
          <el-col :span="2" class="flexd">
            <el-button
              v-powerbtn="{power:'business-preferTariff-search'}"
              size="mini"
              type="primary"
              icon="el-icon-search"
              round
              @click="listRequest"
            >查询</el-button>
          </el-col>
        </el-row>
        <el-row type="flex" justify="start">
          <el-col :span="11">
            <el-form-item label="策略开始时间" label-width="100px">
              <el-date-picker
                v-model="beginStartTime"
                :editable="false"
                :style="tiemLen"
                type="datetime"
                size="mini"
                format="yyyy-MM-dd HH:mm:ss"
                value-format="yyyy-MM-dd HH:mm:ss   "
                placeholder="选择开始时间"
                @change="checkStartTime"
              />
              至
              <el-date-picker
                v-model="beginEndTime"
                :editable="false"
                :style="tiemLen"
                type="datetime"
                size="mini"
                format="yyyy-MM-dd HH:mm:ss"
                value-format="yyyy-MM-dd HH:mm:ss   "
                placeholder="选择结束时间"
                @change="checkTime"
              />
            </el-form-item>
          </el-col>
          <el-col :span="11">
            <el-form-item label="策略结束时间" label-width="100px">
              <el-date-picker
                v-model="finishStartTime"
                :editable="false"
                :style="tiemLen"
                type="datetime"
                size="mini"
                format="yyyy-MM-dd HH:mm:ss"
                value-format="yyyy-MM-dd HH:mm:ss   "
                placeholder="选择开始时间"
                @change="checkStartTime1"
              />
              至
              <el-date-picker
                v-model="finishEndTime"
                :editable="false"
                :style="tiemLen"
                type="datetime"
                size="mini"
                format="yyyy-MM-dd HH:mm:ss"
                value-format="yyyy-MM-dd HH:mm:ss   "
                placeholder="选择结束时间"
                @change="checkTime1"
              />
            </el-form-item>
          </el-col>
          <el-col :span="2" class="flexd">
            <el-button
              size="mini"
              round
              icon="el-icon-refresh"
              @click="reset"
            >
              重置
            </el-button>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <div class="addBtns">
      <el-button
        v-powerbtn="{power:'business-preferTariff-add'}"
        type="primary"
        size="mini"
        round
        icon="el-icon-circle-plus-outline"
        @click="add"
      >新增</el-button>
    </div>
    <div class="app-table">
      <el-table :data="list" border style="width: 100%">
        <el-table-column label="序号" width="50">
          <template slot-scope="scope">
            {{ scope.$index + 1 }}
          </template>
        </el-table-column>

        <el-table-column label="策略名称">
          <template slot-scope="scope">
            <el-popover v-if="scope.row.name" :content="scope.row.name" placement="top" trigger="hover">
              <span slot="reference" style="cursor:pointer">{{ scope.row.name }}</span>
            </el-popover>
          </template>
        </el-table-column>
        <el-table-column label="策略开始时间">
          <template slot-scope="scope">
            <el-popover v-if="scope.row.beginTime" :content="scope.row.beginTime" placement="top" trigger="hover">
              <span slot="reference" style="cursor:pointer">{{ scope.row.beginTime }}</span>
            </el-popover>
          </template>
        </el-table-column>
        <el-table-column label="策略结束时间">
          <template slot-scope="scope">
            <el-popover v-if="scope.row.endTime" :content="scope.row.endTime" placement="top" trigger="hover">
              <span slot="reference" style="cursor:pointer">{{ scope.row.endTime }}</span>
            </el-popover>
          </template>
        </el-table-column>
        <el-table-column label="策略触发条件">
          <template slot-scope="scope">
            <el-popover v-if="scope.row.triggeringConditions" :content="scope.row.triggeringConditions" placement="top" trigger="hover">
              <span slot="reference" style="cursor:pointer">{{ scope.row.triggeringConditions }}</span>
            </el-popover>
          </template>
        </el-table-column>
        <!-- <el-table-column label="触发条件详情">
          <template slot-scope="scope">
            <el-popover v-if="scope.row.triggerConditionDetails" :content="scope.row.triggerConditionDetails" placement="top" trigger="hover">
              <span slot="reference" style="cursor:pointer">{{ scope.row.triggerConditionDetails }}</span>
            </el-popover>
          </template>
        </el-table-column> -->

        <el-table-column label="优惠形式">
          <template slot-scope="scope">
            <el-popover v-if="scope.row.preferentialType" :content="scope.row.preferentialType" placement="top" trigger="hover">
              <span slot="reference" style="cursor:pointer">{{ scope.row.preferentialType }}</span>
            </el-popover>
          </template>
        </el-table-column>

        <el-table-column label="优惠形式详情">
          <template slot-scope="scope">
            <div v-if="scope.row.preferentialType === '折扣购买'">
              <el-popover v-if="scope.row. discountRatio" :content="scope.row. discountRatio" placement="top" trigger="hover">
                <span slot="reference" style="cursor:pointer">{{ scope.row. discountRatio }}</span>
              </el-popover>
            </div>

            <div v-else>
              <el-popover v-if="scope.row.discountAmount" :content="scope.row.discountAmount" placement="top" trigger="hover">
                <span slot="reference" style="cursor:pointer">{{ scope.row.discountAmount }}</span>
              </el-popover>
            </div>
          </template>
        </el-table-column>

        <el-table-column label="描述">
          <template slot-scope="scope">
            <el-popover v-if="scope.row.description" :content="scope.row.description" placement="top" trigger="hover">
              <span slot="reference" style="cursor:pointer">{{ scope.row.description }}</span>
            </el-popover>
          </template>
        </el-table-column>

        <el-table-column label="操作" width="80">
          <template slot-scope="scope">
            <!-- <el-button
              type="primary"
              round
              style="margin-left:0"
              size="mini"
              icon="el-icon-edit"
              @click="edit(scope.row.id, scope.row.name)"
            >编辑</el-button> -->
            <el-button
              v-powerbtn="{power:'business-preferTariff-find'}"
              type="primary"
              plain
              round
              style="margin-left:0"
              size="mini"
              @click="watch(scope.row.id)"
            >查看</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination-container">
        <el-pagination :current-page="pageid" :page-sizes="[20,50,100]" :page-size="pagecount" :total="count" background highlight-current-row layout="total, sizes, prev, pager, next, jumper" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
      </div>
    </div>
    <watch-info v-if="status" :discounts-shape="discountsShape" :watch-dialog="watchDialog" :watch-id="watchId" @closeWatch="closeWatch" />
    <edit-add v-if="status" :select-condition="selectCondition" :discounts-shape="discountsShape" :edit-dialog="editDialog" @closeEdit="closeEdit" />
    <real-edit v-if="status" :edit-dialogs="editDialogs" :traa-name="traaName" :select-condition="selectCondition" :discounts-shape="discountsShape" :watch-id="watchId" @closeEdits="closeEdits" />
  </div>
</template>

<script>
import { getList, getCondition, getShape } from '@/api/discounts.js' // api
import powerbtn from '@/directive/powerbtn/index.js'
import watchInfo from './components/watch.vue'
import editAdd from './components/editAdd.vue'
import realEdit from './components/realEdit.vue'
export default {
  directives: {
    powerbtn
  },
  components: {
    watchInfo: watchInfo,
    editAdd: editAdd,
    realEdit: realEdit
  },
  data() {
    return {
      tiemLen: '',
      list: [], // 列表项
      beginStartTime: '',
      beginEndTime: '',
      finishStartTime: '',
      finishEndTime: '',
      selectCondition: [], // 选择触发条件下拉框
      triggeringConditions: '', // 策略触发条件v-model
      discountsShape: [], // 优惠形式下拉框
      preferentialType: '', // 优惠形式v-model
      name: '', // 策略名称
      traaName: '',
      pagecount: 20, // 每页显示条数
      count: 0, // 总条数
      flag: true, // 改变当前显示页数
      pageid: 1, // 当前页数
      status: false, // 请求状态
      watchDialog: false, // 查看遮罩
      watchId: '0', // 策略id
      editDialog: false, // 新增遮罩
      editDialogs: false, // 编辑 遮罩
      pickerOptions1: {
        disabledDate(time) {
          return time.getTime() > Date.now()
        }
      },
      pickerOptions2: {
        disabledDate(time) {
          return time.getTime() > Date.now()
        }
      },
      startDate: '',
      endDate: ''
    }
  },
  mounted() {
    this.$nextTick(() => {
      var len = this.$refs.vipHeight.$el.offsetWidth
      console.log(len)
      this.tiemLen = {
        'width': len + 'px'
      }
    })
    this.listRequest() // 加载请求列表
    this.getConditionHandle() // 请求优惠策略触发条件下拉
    this.getShapeHandle() // 请求优惠形式下拉
  },
  methods: {

    // 请求触发条件下拉框 getCondition
    getConditionHandle() {
      getCondition().then(res => {
        var list = res.data.list
        for (let i = 0; i < list.length; i++) {
          var key = list[i].configKeyDown
          if (key !== '0' && key !== '1' && key !== '5') {
            list[i].status = true
          }
        }
        this.selectCondition = list
      })
    },

    // 请求优惠形式下拉框
    getShapeHandle() {
      getShape().then(res => {
        var list = res.data.list
        for (let i = 0; i < list.length; i++) {
          var key = list[i].configKeyDown
          if (key !== '0' && key !== '1') {
            list[i].status = true
          }
        }
        this.discountsShape = list
      })
    },

    // 请求列表
    listRequest() {
      this.pageid = 1
      const request = {
        name: this.name, // 策略名称
        triggeringConditions: this.triggeringConditions, // 策略触发条件
        beginStartTime: this.beginStartTime,
        beginEndTime: this.beginEndTime,
        finishStartTime: this.finishStartTime,
        finishEndTime: this.finishEndTime,
        preferentialType: this.preferentialType, // 优惠形式
        pageid: 1, // 当前页数
        pagecount: this.pagecount // 每页可显示条数
      }
      console.log(request)
      getList(request).then(res => {
        this.list = res.data.list // 列表项
        this.count = parseInt(res.data.count) // 总数量
        /* if (this.list.length > 0) {
          this.pageid = parseInt(res.data.list[0].pageid) // 当前页数
        } */
        this.status = true
      }).catch(() => {
        this.$message({
          message: '请求列表失败',
          type: 'error'
        })
      })
    },

    // 当前页面显示条数改变时
    handleSizeChange(num) {
      this.pagecount = num
      this.flag = false
      const request = {
        name: this.name, // 策略名称
        triggeringConditions: this.triggeringConditions, // 策略触发条件
        beginStartTime: this.beginStartTime,
        beginEndTime: this.beginEndTime,
        finishStartTime: this.finishStartTime,
        finishEndTime: this.finishEndTime,
        preferentialType: this.preferentialType, // 优惠形式
        pageid: 1, // 当前页数
        pagecount: num // 每页可显示条数
      }
      console.log('请求数据')
      console.log(request)
      getList(request).then(res => {
        this.list = res.data.list // 列表项
        this.count = parseInt(res.data.count) // 总数量
        this.pageid = 1
        this.pagecount = num
        this.flag = true
      }).catch(() => {
        this.$message({
          message: '请求列表失败，请重试',
          type: 'error'
        })
      })
    },

    // 跳转某页
    handleCurrentChange(num) {
      this.pageid = num // 当前页数
      console.log(num)
      const request = {
        name: this.name, // 策略名称
        triggeringConditions: this.triggeringConditions, // 策略触发条件
        beginStartTime: this.beginStartTime,
        beginEndTime: this.beginEndTime,
        finishStartTime: this.finishStartTime,
        finishEndTime: this.finishEndTime,
        preferentialType: this.preferentialType, // 优惠形式
        pageid: num, // 当前页数
        pagecount: this.pagecount // 每页可显示条数
      }
      console.log('请求数据')
      console.log(request)
      // if (this.flag === true) {
      getList(request).then(response => {
        this.list = response.data.list // 列表项
        this.count = parseInt(response.data.count) // 总数量
        console.log('返回数据')
        console.log(response.data)
      })
      // }
    },

    // 校验开始时间
    checkStartTime(time) {
      const reg = new RegExp('-', 'g')
      if (!!time) {  // eslint-disable-line
        var end
        if (this.beginEndTime !== null) {
          end = new Date(this.beginEndTime.replace(reg, '/')).getTime()
        } else {
          end = ''
        }
        var first = new Date(time.replace(reg, '/')).getTime()
        if (!!end && first > end) {
          this.$message({
            message: '开始时间不能大于结束时间',
            type: 'error'
          })
          this.beginStartTime = ''
        }
      }
      // }
    },
    checkStartTime1(time) {
      const reg = new RegExp('-', 'g')
      if (!!time) {  // eslint-disable-line
        var end
        if (this.finishEndTime !== null) {
          end = new Date(this.finishEndTime.replace(reg, '/')).getTime()
        } else {
          end = ''
        }
        var first = new Date(time.replace(reg, '/')).getTime()
        if (!!end && first > end) {
          this.$message({
            message: '开始时间不能大于结束时间',
            type: 'error'
          })
          this.finishStartTime = ''
        }
      }
      // }
    },

    // 校验结束时间
    checkTime(time) {
      const reg = new RegExp('-', 'g')
      if (!!time) {  // eslint-disable-line
        var start
        if (this.finishStartTime !== null) {
          start = new Date(this.finishStartTime.replace(reg, '/')).getTime()
        } else {
          start = ''
        }
        var end = new Date(time.replace(reg, '/')).getTime()
        if (end < start) {
          this.$message({
            message: '开始时间不能大于结束时间',
            type: 'error'
          })
          this.finishEndTime = ''
        }
      }
      // }
    },
    // 校验结束时间
    checkTime1(time) {
      const reg = new RegExp('-', 'g')
      if (!!time) {  // eslint-disable-line
        var start
        if (this.finishStartTime !== null) {
          start = new Date(this.finishStartTime.replace(reg, '/')).getTime()
        } else {
          start = ''
        }
        var end = new Date(time.replace(reg, '/')).getTime()
        if (end < start) {
          this.$message({
            message: '开始时间不能大于结束时间',
            type: 'error'
          })
          this.finishEndTime = ''
        }
      }
      // }
    },

    // 重置
    reset() {
      this.name = ''
      this.triggeringConditions = ''
      this.beginStartTime = ''
      this.beginEndTime = ''
      this.finishStartTime = ''
      this.finishEndTime = ''
      this.preferentialType = ''
    },

    // 查看详情
    watch(id) {
      console.log(id)
      this.watchDialog = true
      this.watchId = id
    },

    // 查看回调
    closeWatch() {
      this.watchDialog = false
    },

    // 新增
    add() {
      this.editDialog = true
    },

    // 编辑回调
    closeEdit(val) {
      if (val === true) {
        this.listRequest() // 加载请求列表
      }
      this.editDialog = false
    },

    // 编辑
    edit(id, name) {
      this.watchId = id
      this.traaName = name
      this.editDialogs = true
    },

    // 编辑关闭
    closeEdits(val) {
      if (val === true) {
        this.listRequest() // 加载请求列表
      }
      console.log(this.editDialogs)
      this.editDialogs = false
    }
  }
}
</script>

<style scoped>
/* .el-date-editor.el-input, .el-date-editor.el-input__inner{
  width: 90% !important;
} */
.timeLength{
  width: 42% !important;
}
.addBtns{
  margin: 5px 0;
}
</style>
